<template>
  <div>
    <el-card shadow="never">
      <div class="select-box">
        <el-form :inline="true" :model="selectData" class="demo-form-inline">
          <el-form-item label="标题">
            <el-input v-model="selectData.title" placeholder="请输入关键字"/>
          </el-form-item>
          <el-form-item label="详情">
            <el-input
                v-model="selectData.introduce"
                placeholder="请输入关键字"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">{{ store.state.search }}</el-button>
          </el-form-item>
        </el-form>
      </div>

      <el-table :data="dataList.comList" border style="width: 100%">
        <el-table-column prop="id" label="ID" width="180"/>
        <el-table-column prop="title" label="标题" width="180"/>
        <el-table-column prop="introduce" label="详情"/>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="prev, pager, next"
          :total="selectData.count * 2"
      />
    </el-card>
  </div>
</template>

<script lang="ts">
import {defineComponent, reactive, toRefs, computed, watch, onMounted} from "vue";
import {GoodList} from "@/request/api";
import {InitData, ListInt} from "@/class/goods";
import {useStore} from "vuex";

export default defineComponent({
  setup() {
    const data = reactive(new InitData());
    const store = useStore()
    onMounted(() => {
      getGoods();
    });

    const getGoods = () => {
      new GoodList().getGoodsList().then((res) => {
        data.list = res.data;
        data.selectData.count = res.data.length;
      });
    };

    const dataList = reactive({
      comList: computed(() => {
        return data.list.slice(
            (data.selectData.page - 1) * data.selectData.pagesize,
            data.selectData.page * data.selectData.pagesize
        );
      }),
    });

    const handleSizeChange = (pagesize: number) => {
      data.selectData.pagesize = pagesize;
    };

    const handleCurrentChange = (page: number) => {
      data.selectData.page = page;
    };

    //查询
    const onSubmit = () => {
      let arr: ListInt[] = []; //定义数组，查询过后的数据
      if (data.selectData.title || data.selectData.introduce) {
        if (data.selectData.title) {
          arr = data.list.filter((value) => {
            //将过滤出来的数组赋值给arr
            return value.title.indexOf(data.selectData.title) !== -1;
          });
        }
        if (data.selectData.introduce) {
          arr = data.list.filter((value) => {
            //将过滤出来的数组赋值给arr
            return value.introduce.indexOf(data.selectData.introduce) !== -1;
          });
        }
      } else {
        arr = data.list;
      }
      data.selectData.count = arr.length;
      data.list = arr;
    };

    // 监听输入框的两个属性
    watch(
        [() => data.selectData.title, () => data.selectData.introduce],
        () => {
          if (data.selectData.title == "" && data.selectData.introduce == "") {
            getGoods();
          }
        }
    );

    return {
      ...toRefs(data),
      onSubmit,
      handleSizeChange,
      handleCurrentChange,
      dataList,
      store,
    };
  },
});
</script>

<style scoped></style>
